<template>
	<div class="pro-main" style="margin-top: 80px;">
		<div class="row-header" :class="{'act': isType}"></div>
		<!-- <div class="pro-info">
			<h2>推广二维码</h2>	
			<div class="pro-code">
				<div class="pro-img">					
					<img class="img-item" :src="imgUrl" />
				</div>
			</div>
			<p>通过扫码分享注册</p>
		</div> -->
		<img class="img-item" :class="{'act': isType}" :src="imgUrl" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '',
				isType: false
			}
		},
		created() {
			if (localStorage.getItem('userInfo')) {
				const info = JSON.parse(localStorage.getItem('userInfo'));
				this.imgUrl = this.$store.state.qualifyQuery.siteUrl + info.miniCodeUrl
				//this.imgUrl = process.env.VUE_APP_SERVE_URL + info.miniCodeUrl
			}
			this.init()
		},
		methods: {
			init(){
				const ks = (document.documentElement.clientHeight / document.documentElement.clientWidth).toFixed(2)
				this.isType = ks > 2
			}
		}
	}
</script>

<style lang="less" scoped>
	.pro-main{
		.row-header{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background: url(../../../assets/images/icon_shart.png) no-repeat;
			background-size: 100%;
			z-index: 1;
			&.act{
				background: url(../../../assets/images/icon_shart_max.png) no-repeat;
				background-size: 100% !important;
			}
		}
		.img-item{
			position: absolute;
			bottom: 11%;
			width: 220px;
			left: 0;
			right: 0;
			display: inline-block;
			margin: 0 auto;
			z-index: 99;
			&.act{
				width: 300px;
				bottom: 16%;
			}
		}
		.pro-info{
			position: absolute;
			left: 6%;
			right: 6%;
			top: 50%;
			margin: -400px auto;
			padding: 9% 5%;
			border-radius: 32px;
			z-index: 9;
			height: 800px;
			text-align: center;
			background: url(../../../assets/images/icon_share_bg.png) no-repeat;
			background-size: 100%;
			>h2{
				font-weight: 500;
				font-size: 42px;
				padding-bottom: 90px;
			}
			>p{
				font-size: 25px;
				padding-top: 60px;
				color: #999;
			}
			// .pro-code{
			// 	margin-top: 50px;
			// 	padding: 0 10%;
			// 	.pro-img{
			// 		width: 380px;
			// 		position: relative;
			// 		margin: 0 auto;
			// 		.img-item{
			// 			width: 100%;
			// 			height: 380px;
			// 		}
			// 	}
			// }
		}
	}
	
</style>
